<link rel="stylesheet" type="text/css" href="modules/IShopStore/pnjavascript/ddtabmenu/ddtabmenufiles/ddcolortabs_blue.css" />

<!-- #################################################### -->
<!-- Start Map code -->
<!-- #################################################### -->
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script type="text/javascript">
      var geocoder = new google.maps.Geocoder();   
   var markersArray = [];
   var marker;   
   
      function geocodePosition(pos) {
        geocoder.geocode({
          latLng: pos
        }, function(responses) {
          if (responses && responses.length > 0) {
            updateMarkerAddress(responses[0].formatted_address);
          } else {
            updateMarkerAddress('Cannot determine address at this location.');
          }
        });
      }

      function updateMarkerStatus(str) {
        document.getElementById('markerStatus').innerHTML = str;
      }

      function updateMarkerPosition(latLng) {

        document.getElementById("latitude").value = latLng.lat();
        document.getElementById("longitude").value = latLng.lng();
        document.getElementById('info').innerHTML = [
          latLng.lat(),
          latLng.lng()
        ].join(', ');


      }

      function updateMarkerAddress(str) {
        document.getElementById('address').innerHTML = str;
      }

      function initialize() {
        <!--[if $form.map_lat && $form.map_lon]-->
         var latLng = new google.maps.LatLng(<!--[$form.map_lat]-->, <!--[$form.map_lon]-->);
        <!--[else]-->
         var latLng = new google.maps.LatLng(7.968967853297759,98.32956784667977);
        <!--[/if]-->

        var map = new google.maps.Map(document.getElementById('mapCanvas'), {
            scrollwheel: false,
          zoom: 11,
          center: latLng,
          mapTypeId: google.maps.MapTypeId.HYBRID
        });
      
      
        marker = new google.maps.Marker({
          position: latLng,
          title: '<!--[$form.name]-->',
          map: map,
          draggable: true
        });
      
      
    markersArray.push(marker);     
        google.maps.event.addListener(map, 'click', function(e) {
          placeMarker(e.latLng, map);
        });       
      
        // Update current position info.
        updateMarkerPosition(latLng);
        geocodePosition(latLng);
      
        /*
        // Add dragging event listeners.
        google.maps.event.addListener(marker, 'dragstart', function() {
          updateMarkerAddress('Dragging...');
        });
      
        google.maps.event.addListener(marker, 'drag', function() {
          updateMarkerStatus('Dragging...');
          updateMarkerPosition(marker.getPosition());
        });
      
        google.maps.event.addListener(marker, 'dragend', function() {
          updateMarkerStatus('Drag ended');
          geocodePosition(marker.getPosition());
        });
        */
      }
    
      function placeMarker(position, map) {
    
       //alert(position);
       //Clean marker point
       clearOverlays();
       
       //Make new marker object
        marker = new google.maps.Marker({
          position: position,
          map: map
        });
      
        //Add marker to array
    markersArray.push(marker);
    
    //Write marker to map     
        map.panTo(position);
      
        updateMarkerAddress('Clicking...');
      
    updateMarkerStatus('Clicking...');
    updateMarkerPosition(marker.getPosition()); 
    
    updateMarkerStatus('Click ended');
    geocodePosition(marker.getPosition());               
      }
    
   function clearOverlays() {
    if (markersArray) {
     for (i in markersArray) {
      markersArray[i].setMap(null);
     }
    }
   }       

      // Onload handler to fire off the app.
      google.maps.event.addDomListener(window, 'load', initialize);
    
      </script>

<!-- #################################################### -->     
<!-- End Map code -->
<!-- #################################################### -->



<div id="ddtabs" class="ddcolortabs">
  <ul>
    <li><a href="<!--[pnmodurl modname='IShopStore' type='admin' func='page' ctrl='home']-->" rel="ct1"><span>หน้าหลัก</span></a></li>
    <li><a href="<!--[pnmodurl modname='IShopStore' type='admin' func='page' ctrl='About']-->" rel="ct1">
    <span>รายละเอียดอื่นๆ</span></a></li>
  </ul>
</div>
<div class="ddcolortabsline">&nbsp;</div>
<!-- end tab menu -->


<fieldset>
<h3>ข้อมูล ติดต่อร้านค้า</h3>

<form id='form' action="<!--[pnmodurl modname='IShopStore' type='adminform' func='submit' ctrl='About']-->" method="post" enctype="multipart/form-data" onsubmit="return validateForm(this)">
<input type="hidden" name="form[id]" value="<!--[$form.id]-->" />
<input type="hidden" name="forward[modname]" value="IShopStore" />
<input type="hidden" name="forward[type]" value="admin" />
<input type="hidden" name="forward[func]" value="form" />
<input type="hidden" name="forward[ctrl]" value="about" />
<input type="hidden" name="forward[target]" value="Contact" />
<input type="hidden" name="forward[id]" value="<!--[$form.id]-->" />

<TABLE width='100%' border="0" align="center">
<TR>
  <TD>
      <textarea name="form[concact_us]" rows="20" cols="100"><!--[$form.concact_us]--></textarea>
  </TD>
</TR>
<TR>
  <TD>
      &nbsp;
  </TD>
</TR>
<TR>
  <TD>
<h3>ที่ตั้งร้าน</h3>
 
<fieldset>
      <TABLE width="900" style="float:left;">
  
      <TR>
        <TD valign="top" width="650">

              <style>
              #mapCanvas { width: 100%; height:600px; float: left;position:relative;
                }
              #infoPanel {float: left; margin-left: 10px;
                }
              #infoPanel div { margin-bottom: 5px;
                }
              </style>

              <div id="mapCanvas"></div>

        </TD>
        <TD valign="top" width="150">

                    <TABLE width='150' border="0" height="200">
                        <TR>
                            <TD class='td-label' align="left"><B>Latitude</B></TD>
                        </TR>
                        <TR>
                            <TD align="left">
                              <input id="latitude" type="text" name="form[map_lat]" value="<!--[$form.map_lat]-->" title="latitude" class="required" size="30"  /><FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                              <span id='error-latitude'></span>
                            </TD>
                        </TR>
                        <TR>
                            <TD class='td-label' align="left"><B>Longitude</B></TD>
                        </TR>
                        <TR>
                            <TD align="left">
                              <input id="longitude" type="text" name="form[map_lon]" value="<!--[$form.map_lon]-->" title="longitude" class="required" size="30" /><FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                              <span id='error-longitude'></span>
                            </TD>
                        </TR>
                    </TABLE>
               <BR>
              <hr>
              <div id="infoPanel" style="width:200px;">
                <b>หมุดแสดงตำแหน่งร้านค้า</b>
                <div id="markerStatus"><i>คลิ๊กบนแผนที่ เพื่อเปลี่ยนตำแหน่ง</i></div>
                <b>ตำแหน่งปัจจุบัน</b>
                <div id="info"></div>
                <b>สถานที่ใกล้เคียง</b>
                <div id="address"></div>
              </div>
        </TD>
      </TR>
      </TABLE>

</fieldset>




  </TD>
</TR>
<TR>
  <TD><!--[if $form.id]--><INPUT TYPE="submit" value='Update' name='Update' type="submit" ><!--[/if]-->
      <!--[if $form.id==null]--><INPUT TYPE="submit" value='Submit' name='Submit' type="submit" ><!--[/if]-->&nbsp;&nbsp;
      </TD>
</TR>
</TABLE>

</form>
</fieldset>